/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<!-- 头部部分 -->
		<view class="vip-title">
			<view class="vip-title-info">
				<view class="photo">
					<image class="avatar" :src="userinfo.avatar?userinfo.avatar:'../../static/user-photo.png'" mode="aspectFit"></image>
					<image v-if="isvip" src="../../static/user-vip.png" mode="aspectFit" class="viplogo"></image>
				</view>
				<view class="name">
					<view class="nickname">
						<text>{{userinfo.nickname}}</text>
						<text v-if="isvip" style="margin-left: 20upx;font-size: 25upx;color: #b57400;">({{vipinfo.levelname+'-'+vipinfo.viptype}})</text>
					</view>
					<view class="vipinfo" v-if="isvip">
						<text>到期时间：{{vipinfo.dqtime}}</text>
					</view>
				</view>
			</view>
		</view>
	
	
	
		<!-- 方式一和方式二 -->
		<view class="mode">
			<!--  #ifdef  MP -->	
			<!-- 方式一 -->
<!-- 			<view class="mode-one" v-if="is_sh==0">
				<scroll-view scroll-x="true" >
				<view class="navbar" :style="{'background':backgra}">
					<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="tabCurrentIndex === index? 'active' : '' " @click="tabClick(index,item.id,item.name,item.quanyi)">
						{{ item.name }}
					</view>
				</view>
				</scroll-view>
				<view class="mode-one-top">
					<text>请选择会员套餐</text>
				</view>
				<view class="mode-one-center"  v-show="this.vipList!=[]">
					<view @click="chooseVip(index, item,item.id)" :class="{newviplist: addBorder === index}" class="vip-list" v-for="(item, index) in vipList" :key="index">
						<view :style="{background:(addBorder === index? backgra:'')}">{{item.name}}</view>
						<view><text>￥</text>{{item.price}}</view>
					</view>
				</view>
				<view class="mode-one-bottom">
					<text @click="goPay(vipid)">立即开通</text>
				</view>
			</view> -->
			<!--  #endif -->	
			
			
			
			<!--  #ifndef  MP -->
			<!-- 方式一 -->
			<view class="mode-one">
				<!-- 头部 -->
				<!-- 会员等级选择 -->
			  <scroll-view style="white-space:nowrap;" scroll-x="true" >
				<view class="navbar" :style="{'background':backgra}">
					<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="tabCurrentIndex === index? 'active' : '' " @click="tabClick(index,item.id,item.name,item.quanyi)">
						{{ item.name }}
					</view>
				</view>
			  </scroll-view>
				<view class="mode-one-top">
					<text>请选择会员周期</text>
				</view>
				
				<view class="tab" v-show="this.vipList!=[]">
					
					<!-- 显示区域 -->
					<view class="list" v-for="(item, index) in navList" :key="index"
					 v-if="tabCurrentIndex === index">
						<!-- {{ item.vipList }} -->
						<view class="mode-one-center">
							<view @click="chooseVip(index, item,item.id)" :class="{newviplist: addBorder === index}" 
							class="vip-list" v-for="(item, index) in vipList" :key="index">
								<view :style="addBorder === index ? {'background':backgra}:''">{{item.name}}</view>
								<view><text>￥</text>{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
				
				
				
				<view class="mode-one-bottom">
					<text @click="goPay()" :style="{'background':backgra}">立即开通</text>
				</view>
			</view>
			<!--  #endif -->	
			
			<!-- 会员权益 -->
			<view class="mode-one-top">
				<text>会员权益</text>
			</view>
			<view>注意：本小程序不支持会员充值</view>
			<view class="vip-instructions">
				<jyf-parser :html="quanyi" ></jyf-parser>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import {getViptime} from '@/request/vip'
	import {checkUserinfo} from '@/request/checkUserinfo'
export default {
	components:{
		jyfParser
	},
	data() {
		return {
			addBorder: 0,
			vipList: [],
			userinfo:'',
			wx_nickname:'',
			zhouqiid: '',
			jhm:'',
			vipinfo:[],
			isvip:false,
			is_sh:1,
			tabCurrentIndex: 0,
			navList: [],
			vipname:'',
			viprate:'',
			backgra:'#ffdd97',
			levelname:'',
			levelid:'',
			quanyi:''
		};
	},
	onLoad() {
		checkUserinfo()
		const BASE_URL = uni.BASE_URL
		uni.request({
			url: BASE_URL+'index/set/base_set',
			method:'GET',
			success:(res) =>{
				console.log(res.data);
				let set=res.data.data
				if(set.smallapp){
					this.is_sh=set.smallapp.is_sh
				}
			},
			fail:(res)=> {
				console.log(res.data);
			}
		});
		this.getViptime()
		this.base_check()
		
		// 页面显示是默认选中第一个
		this.tabCurrentIndex = 0;
	},
	onShareAppMessage(res) {
		let path = getCurrentPages()
		let path_share = path[0].$page.fullPath
		let path_title = path[0].data.title
		let userinfo = uni.getStorageSync('userinfo')
		let base_set = uni.getStorageSync('base_set')
		if(userinfo.uid=='' || !userinfo.uid){
			uni.navigateTo({
				url:'../login/login'
			})
			return {
				title: '请先登录后再分享给好友',
				path: ''
			}
		}else{
			if (res.from === 'button') {
				
			}
			return {
				title: base_set.title,
				path: `${path_share}?pid=${userinfo.uid}`
			}
		}
	},
	onShow() {
		checkUserinfo()
		this.getViptime()
		this.base_check()
		this.tabCurrentIndex = 0;
	},
	methods: {
		changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
		//顶部tab点击
		tabClick(index,id,levelname,quanyi) {
			console.log(index)
			console.log(id)
			this.vipprice(id)
			this.tabCurrentIndex = index;
			this.levelname = levelname;
			this.quanyi = quanyi;
			this.levelid=id;
			if(index==0){
				this.backgra='#ffdd97'
			}
			if(index==1){
				this.backgra='#c2ccff'
			}
			if(index==2){
				this.backgra='#e29dff'
			}
			if(index==3){
				this.backgra='#ffa5c1'
			}
			if(index>3){
				this.backgra='#ffdd97'
			}
		},
		changeJhm(e){
			this.jhm=e.detail.value
		},
		ljjh(){
			if(this.jhm==''){
				uni.showToast({
					title:'激活码不能为空',
					icon:'none'
				})
				return false
			}
			const BASE_URL = uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/vip/jhmjh',
				method:'POST',
				data:{
					uid:this.userinfo.id,
					jhm:this.jhm
				},
				success:(res) =>{
					console.log(res.data);
					if(res.data.code==0){
						uni.showToast({
							title:res.data.msg,
						})
						uni.switchTab({
							url:'../user/user'
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
		},
		base_check(){
			const userinfo_check= uni.getStorageSync('userinfo');
			if(userinfo_check.userdata){
				this.userinfo=userinfo_check.userdata
				if(userinfo_check.userdata.is_vip==1){
					this.isvip=true
					const BASE_URL = uni.BASE_URL
					uni.request({
						url: BASE_URL+'index/vip/vipinfo',
						method:'POST',
						data:{
							uid:this.userinfo.id,
						},
						success:(res) =>{
							console.log(res.data);
							this.vipinfo=res.data.data
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}
			}
		},
		getViptime () {
			getViptime().then(res => {
				console.log(res.data,11111)
				this.levelid=res.data.data.viplevels[0].id
				this.levelname = res.data.data.viplevels[0].name
				this.quanyi = res.data.data.viplevels[0].quanyi
				this.zhouqiid=res.data.data.viptime[0].id
				this.navList=res.data.data.viplevels
				let name=[]
				res.data.data.viptime.forEach(item =>{
				   	name.push(item.name)
				})
				this.name=name
				this.vipprice(1)
			})
		},
		vipprice(id){
			
			uni.request({
				url: uni.BASE_URL+'index/user/switchlevel',
				method:'POST',
				data:{
					id:id,
				},
				success:(res) =>{
					console.log(res.data);
					// console.log(this.name)
					let keys = Object.keys(res.data.data);
					let value=Object.values(res.data.data)
					// console.log(keys)
					// console.log(value)
					let list=[]
					keys.forEach(item =>{
						let add=item.slice(-1)
						let btn={id:add,price:'',name:''}
						list.push(btn)
					})
					for(var i=0;i<value.length;i++){
						list[i].price=value[i]
					}
					for(var i=0;i<this.name.length;i++){
						list[i].name=this.name[i]
					}
					this.vipList=list
					if(this.vipList.length == 1) {
						this.chooseVip(0, this.vipList[0],this.vipList[0].id)
					} else if(this.vipList.length > 1) {
						this.chooseVip(1, this.vipList[1],this.vipList[1].id)
					}
				},
			});
		},
		chooseVip(index, item,zhouqiid) {
			this.addBorder = index
			this.zhouqiid = zhouqiid
			console.log(item)
			this.viprate=item
		},
		goPay() {
			let item = JSON.stringify(this.viprate)
			uni.navigateTo({
				url: `/pages/confirm-order-form/confirm-order-form?goodstype=vip&zhouqiid=${this.zhouqiid}&levelid=${this.levelid}&levelname=${this.levelname}&item=${item}`
			});
		}
	}
};
</script>
<style lang="less" scoped>

.container {
	background-color: #333;
}

// 头部部分
.vip-title {
	height: 345upx;
	padding: 0 20upx;
	padding-top: 40upx;
	box-sizing: border-box;
	&-info {
		width: 710upx;
		height: 250upx;
		background-color: #f7dba9;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		.photo {
			width: 100upx;
			height: 100upx;
			border-radius: 100%;
			border: 4upx solid #fff;
			margin: 0 30upx;
			position: relative;
			.avatar {
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
			}
			.viplogo{
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 0;
				bottom:0;
				z-index: 10;
			}
		}
		.name {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 60%;
			.vipinfo{
				image {
					width: 30upx;
					height: 30upx;
				}
				text {
					font-size: 25upx;
					font-weight: 700;
				}
			}
			.nickname{
				text {
					font-size: 30upx;
					font-weight: 700;
				}
			}
			view {
				font-size: 24upx;
				color: #333;
				image {
					width: 15upx;
					height: 20upx;
					margin-left: 15upx;
				}
			}
		.vip-time{
			
			.vip-img{
				width: 50upx;
				height: 50upx;
				float: left;
				margin-top: -10upx;
			}
			text{
				text-align: center;
				 
			}
		}
		}
	}
}

 
// 方式一和方式二
.mode {
	background-color: #fff;
	padding: 20upx;
	padding-bottom: 120rpx;
	border-radius: 30upx 30upx 0 0;
	// 方式一
	&-one {
		&-top {
			height: 128upx;
			line-height: 128upx;
			text {
				font-size: 30upx;
				font-weight: 700;
			}
		}
		&-center {
			display: flex;
			.vip-list {
				width: 208upx;
				height: 250upx;
				margin-right: 20upx;
				border: 2upx solid #cfcfcf;
				border-radius: 10upx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				background-color: #f7f7f7;
				text:nth-child(1) {
					font-size: 28upx;
					font-weight: 700;
					color: #333;
				}
				text:nth-child(2) {
					font-size: 35upx;
					font-weight: 700;
					color: #deb565;
					text {
						font-size: 26upx;
						font-weight: 700;
						color: #deb565;
					}
				}
				text:nth-child(3) {
					font-size: 24upx;
					color: #999;
					text-decoration: line-through;
				}
			}
			.newviplist {
				border: 2upx solid orange;
			}
		}
		&-bottom {
			margin-top: 50upx;
			text {
				display: block;
				width: 710upx;
				height: 90upx;
				font-size: 30upx;
				color: #333;
				text-align: center;
				line-height: 90upx;
				border-radius: 90upx;
				background-color: #e7c382;
			}
		}
	}
	
	// 方式二
	&-two {
		margin-top: 60upx;
		&-top {
			height: 60upx;
			text {
				font-size: 30upx;
				font-weight: 700;
				color: #333;
			}
		}
		&-bottom {
			position: relative;
			input {
				width: 450upx;
				height: 92upx;
				border: 2upx solid #e0e0e0;
				border-radius: 10upx;
				background-color: #f7f7f7;
				padding-left: 30upx;
			}
			text {
				font-size: 28upx;
				font-weight: 700;
				color: #deb565;
				border-bottom: 4upx solid #deb565;
				position: absolute;
				top: 30upx;
				right: 40upx;
			}
		}
	}
}

.active{
	// background-color: #deb565;
	background-color: #ffffff;
}
.navbar{
	height: 60upx;
	background-color: #deb565;
	display: flex;
	justify-content: space-between;
	// border: 1px solid #deb565;
	border-top-left-radius: 15upx;
	border-top-right-radius: 15upx;
	margin-bottom: 30upx;
	.nav-item{
		width: 24%;
		height: 100%;
		line-height: 60upx;
		text-align: center;
		font-size: 28upx;
		border-top-left-radius: 15upx;
		border-top-right-radius: 15upx;
	}
}
// 会员服务说明样式
.jurisdiction{
		text:nth-child(1){
			font-size: 40upx;
			color: #808080;
			line-height: 80upx;
		}
		text:nth-child(2){
			font-size: 26upx;
			margin-left: 20upx;
			color: #808080;
		}
		view{
			font-size: 26upx;
			line-height: 50upx;
			color: #808080;
			
		}
}
</style>